<script setup>
import { ref } from 'vue'
import { Document, Menu as IconMenu, Location, Setting } from '@element-plus/icons-vue'
const isCollapse = ref(false) //控制菜单栏的折叠
//折叠打开按钮
const handleOpen = (key, keyPath) => {
  console.log('open' + key, keyPath)
}
//折叠关闭按钮
const handleClose = (key, keyPath) => {
  console.log('close' + key, keyPath)
}
defineOptions({
  name: 'indexMenu',
})
</script>

<template>
  <div class="container">
    <el-menu
      default-active="/menu/homepage"
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
      @open="handleOpen"
      @close="handleClose"
      router="true"
    >
      <div class="leftHeader">
        <el-image class="logo" src="/src/assets/home/商标.png"></el-image>
        <el-image v-show="!isCollapse" class="business" src="/src/assets/home/商名.png"></el-image>
      </div>
      <el-sub-menu index="/menu">
        <template #title>
          <el-icon><location /></el-icon>
          <span>我的</span>
        </template>
        <el-menu-item-group>
          <!-- <template #title><span>Group One</span></template> -->
          <el-menu-item index="/menu/homepage">主页</el-menu-item>
          <el-menu-item index="/menu/personage">个人信息</el-menu-item>
        </el-menu-item-group>
        <!-- <el-menu-item-group title="Group Two">
          <el-menu-item index="1-3">item three</el-menu-item>
        </el-menu-item-group> -->
        <!-- <el-sub-menu index="1-4">
          <template #title><span>items four</span></template>
          <el-menu-item index="1-4-1">item one</el-menu-item>
        </el-sub-menu> -->
      </el-sub-menu>
      <el-menu-item index="/menu/contribute">
        <el-icon><icon-menu /></el-icon>
        <template #title>投稿</template>
      </el-menu-item>
      <el-menu-item index="3" disabled>
        <el-icon><document /></el-icon>
        <template #title>充值</template>
      </el-menu-item>
      <el-menu-item index="4">
        <el-icon><setting /></el-icon>
        <template #title>设置</template>
      </el-menu-item>
    </el-menu>
    <div class="right">
      <div class="header">
        <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
          <el-radio-button :value="true">折叠</el-radio-button>
          <el-radio-button :value="false">关闭</el-radio-button>
        </el-radio-group>
      </div>
      <RouterView class="main"></RouterView>
    </div>
  </div>
</template>

<style lang="scss" scoped>
//整个页面样式
.container {
  height: 100vh;
  width: 100%;
  display: flex;
  //左边菜单样式
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 15%;
    min-height: 400px;
  }
  //左上角商标与商名设置
  .leftHeader {
    height: 10%;
    width: 100%;
    margin-bottom: 30%;
    display: flex;
    .logo {
      top: 15%;
      left: 8%;
      height: 60%;
    }
    .business {
      top: 15%;
      left: 15%;
      height: 60%;
    }
  }
  //右半边主体样式
  .right {
    height: 100%;
    flex: 1;
    background-color: aquamarine;
    //右半边头部样式
    .header {
      height: 5%;
      width: 100%;
      background-color: blueviolet;
    }
    //右半边子路由样式
    .main {
      height: 95%;
      width: 100%;
      background-color: brown;
    }
  }
}
</style>
